<template>
	<view class="container">

		<!-- 基础信息 -->
		<view class="baseInfo">
			<text class="lv">基础信息</text>
			<view class="baseInfo-input">
				<text>姓名</text>
				<input type="text" v-model="baseMsg.name" placeholder="请输入" />
			</view>
			<view class="baseInfo-input">
				<text>配偶姓名</text>
				<input type="text" v-model="baseMsg.pName" placeholder="请输入配偶姓名" />
			</view>
			<view class="baseInfo-input">
				<text>性别</text>
				<radio-group @change="radioChange">
					<label class="radio">
						<radio value="男" />男
					</label>
					<label class="radio">
						<radio value="女" />女
					</label>
				</radio-group>
			</view>
			<view class="baseInfo-input">
				<text>年龄</text>
				<input type="number" v-model="baseMsg.age" value="" placeholder="请输入年龄" />
			</view>
			<view class="baseInfo-input">
				<text>民族</text>
				<picker @change="nationPickerChange" :value="index.nationIndex" :range="array.nationArray">
					<view>{{array.nationArray[index.nationIndex]}} ></view>
				</picker>
			</view>
			<view class="baseInfo-input">
				<text>出生日期</text>
				<picker mode="date" :value="index.date" :start="startDate" :end="endDate" @change="birthDateChange">
					<view>{{index.date}} ></view>
				</picker>
			</view>
			<view class="baseInfo-input">
				<text>身份证号</text>
				<input type="idcard" v-model="baseMsg.idCard" placeholder="请输入身份证号" />
			</view>
			<view class="baseInfo-input">
				<text>户籍地址</text>
				<input type="text" v-model="baseMsg.address" placeholder="请输入户籍地址" />
			</view>
			<view class="baseInfo-input">
				<text>手机号</text>
				<input type="number" v-model="baseMsg.phone" placeholder="请输入手机号" />
			</view>
			<view class="baseInfo-input">
				<text>自理能力</text>
				<picker @change="abilityPickerChange" :value="index.abilityIndex" :range="array.abilityArray">
					<view>{{array.abilityArray[index.abilityIndex]}} ></view>
				</picker>
			</view>
			<view class="baseInfo-input">
				<text>老人类型</text>
				<picker @change="oldTypePickerChange" :value="index.oldTypeIndex" :range="array.oldTypeArray">
					<view class="uni-input">{{array.oldTypeArray[index.oldTypeIndex]}}</view>
				</picker>
			</view>
			<!-- <view class="house">
				<text>房产信息上传</text>
				<view class="house-up" @click="houseUpload">
					<image src="../../static/icon/camera.png" mode="widthFix"></image>
				</view>
				<view class="house-img" v-for="(item,index) in imgCamera.imgHouse">
					<image :src="item" mode="widthFix"></image>
				</view>
			</view>
			<view class="person">
				<text>个人材料证明</text>
				<view class="person-up" @click="houseUpload">
					<image src="../../static/icon/camera.png" mode="widthFix"></image>
				</view>
				<view class="person-img" v-for="(item,index) in imgCamera.imgPerson">
					<image :src="item" mode="widthFix"></image>
				</view>
			</view> -->
		</view>

		<!-- 居住信息 -->
		<view class="liveInfo">
			<text class="lv">居住信息</text>
			<view class="baseInfo-input">
				<text>区域</text>
				<input type="text" v-model="livMsg.district" placeholder="区 街道 居委会" />
			</view>
			<view class="baseInfo-input">
				<text>申请改造家庭住址</text>
				<input type="text" v-model="livMsg.address" placeholder="请输入" />
			</view>
			<view class="baseInfo-input">
				<text>房屋所有人</text>
				<input type="text" v-model="livMsg.owner" placeholder="请输入" />
			</view>
			<view class="baseInfo-input">
				<text>居住人数</text>
				<input type="number" v-model="livMsg.livCount" placeholder="请输入" />
			</view>
			<view class="baseInfo-input,input-three">
				<text>户型</text>
				<input type="text" v-model="livMsg.houseR" placeholder="请输入" />室
				<input type="text" v-model="livMsg.houseH" placeholder="请输入" />厅
				<input type="text" v-model="livMsg.houseT" placeholder="请输入" />卫
			</view>
			<view class="baseInfo-input">
				<text>房屋类型</text>
				<picker @change="houseTypePickerChange" :value="index.houseTypeIndex" :range="array.houseTypeArray">
					<view>{{array.houseTypeArray[index.houseTypeIndex]}} ></view>
				</picker>
			</view>
			<view class="baseInfo-input">
				<text>建筑年代</text>
				<input type="number" v-model.number="index.arcIndex" placeholder="请输入" />
				<!-- <picker mode="date" :value="index.arcIndex" :start="startDate" :end="endDate" @change="arcDateChange">
					<view>{{index.arcIndex}} ></view>
				</picker> -->
			</view>
			<view class="baseInfo-input">
				<text>改造区域</text>
				<text v-if="modifydata.length" @click="openModify">
					<text v-for="item in modifydata">{{item+" "}}</text>
				</text>
				<text v-else @click="openModify">请选择改造区域</text>
			</view>
			<view class="baseInfo-input">
				<text>建筑面积</text>
				<input type="number" v-model="livMsg.area" placeholder="请输入" />
			</view>
		</view>

		<!-- 紧急联系人 -->
		<view class="phone">
			<text class="lv">紧急联系人</text>
			<view class="baseInfo-input">
				<text>联系人姓名</text>
				<input type="text" v-model="peoMsg.secondName" placeholder="请输入联系人姓名" />
			</view>
			<view class="baseInfo-input">
				<text>联系方式</text>
				<input type="number" v-model="peoMsg.secondTelephone" placeholder="请输入联系方式" />
			</view>
		</view>

		<!-- 申请改造项目 -->
		<view class="project">
			<text class="lv">申请改造项目</text>
			<view class="baseInfo-input">
				<text>改造机构</text>
				<text @click="openOrgSelect">{{getJigou}}</text>
			</view>
			<view class="baseInfo-input">
				<text>产品</text>
				<navigator url="applyPage/selectProduct" v-if="getPro.length!=0">
					<text v-for="item in getPro">{{item | blank}}</text>
				</navigator>
				<navigator url="applyPage/selectProduct" v-else>点击选择改造产品</navigator>
			</view>
		</view>

		<!-- 提交 -->
		<button class="btnSubmit,color-1" @click="btnSubmit">提交</button>

		<!-- 改造区域 -->
		<uni-popup background-color="#fff" ref="popup" type="bottom">
			<view class="popup-title">
				改造区域
			</view>
			<view class="popup-modify">
				<checkbox-group @change="checkChange">
					<label v-for="item in modifyArray">
						<view class="check-item">
							<checkbox :value="item.value" :checked="item.checked" />
							{{item.name}}
						</view>
					</label>
				</checkbox-group>
			</view>
		</uni-popup>

		<!-- 机构选择 -->
		<uni-popup background-color="#fff" ref="popupPlace" type="bottom">
			<radio-group class="jigou-popup" @change="jiGouiChange">
				<label v-for="(item, index) in jiGouData" :key="index">
					<view class="">
						<text>{{item.name}}</text>
						<radio :value="item.organizationId" />
					</view>
				</label>
			</radio-group>
		</uni-popup>
	</view>
</template>

<script>
	// import ModifyPlace from "../../components/ModifyPlace.vue"
	import OrgSelect from "components/OrgSelect.vue"
	import {
		getInstitutionMenu,
		getInstitutionDetail,
		userApply
	} from "@/common/request.js"
	import {
		formatTime
	} from "../../common/utils.js"

	export default {
		name: 'Apply',
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				baseMsg: {},
				livMsg: {},
				peoMsg: {},
				projMsg: {
					jigou: 100
				},
				array: {
					nationArray: [
						"汉族", "蒙古族", "回族", "藏族", "维吾尔族", "苗族", "彝族", "壮族", "布依族", "朝鲜族", "满族", "侗族", "瑶族", "白族",
						"土家族",
						"哈尼族", "哈萨克族", "傣族", "黎族", "傈僳族", "佤族", "畲族", "高山族", "拉祜族", "水族", "东乡族", "纳西族", "景颇族", "柯尔克孜族",
						"土族", "达斡尔族", "仫佬族", "羌族", "布朗族", "撒拉族", "毛南族", "仡佬族", "锡伯族", "阿昌族", "普米族", "塔吉克族", "怒族",
						"乌孜别克族",
						"俄罗斯族", "鄂温克族", "德昂族", "保安族", "裕固族", "京族", "塔塔尔族", "独龙族", "鄂伦春族", "赫哲族", "门巴族", "珞巴族", "基诺族"
					],
					abilityArray: [
						"生活自理",
						"轻度失能",
						"中度失能",
						"重度失能"
					],
					oldTypeArray: [
						"徐州户籍城乡特困、低保及低保边缘的老年人",
						"徐州户籍低收入、计划生育特别扶助对象等老年人",
						"徐州户籍80周岁及以上的老年人",
						"徐州户籍65周岁及以上的老年人",
						"徐州户籍非老年人家庭或非徐州户籍老年人家庭",
					],
					houseTypeArray: [
						"电梯房",
						"楼梯房",
						"平房"
					],
				},
				index: {
					nationIndex: 0,
					date: currentDate,
					abilityIndex: 0,
					oldTypeIndex: 0,
					houseTypeIndex: 0,
					arcIndex: 2021, // 建筑年代
				},
				imgCamera: {
					imgHouse: [],
					imgPerson: []
				},
				modifyArray: [{
						value: '洗漱间',
						name: '洗漱间',
						checked: false
					},
					{
						value: '卫生间',
						name: '卫生间',
						checked: false
					},
					{
						value: '厨房',
						name: '厨房',
						checked: false
					},
					{
						value: '卧室',
						name: '卧室',
						checked: false
					},
					{
						value: '客厅',
						name: '客厅',
						checked: false
					}
				], // 改造区域temp
				modifydata: [], // 改造区域real
				jiGouData: [], // 机构数据,
				proData: [],
			}
		},
		watch: {
			modifyArray(val, oldVal) {
				console.log(val + "   " + oldVal);
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			getPro() {
				this.proData = getApp().globalData.selectedPro

				function dedupe(array) {
					return Array.from(new Set(array));
					//这里的 Array.from（）方法是将两类对象转为真正的数组：类似数组的对象和可遍历的对象（包括es6新增的数据结构Set和Map）
				}
				return dedupe(this.proData)
			},
			getJigou() {
				if (this.projMsg.jigou === 100) {
					return "点击选择改造机构"
				} else {
					return this.jiGouData[this.projMsg.jigou - 1].name
				}
			}
		},
		filters: {
			blank(text) {
				return text + "  "
			}
		},
		components: {
			// ModifyPlace,
			OrgSelect
		},
		created() {
			this.getJiGou()
		},
		methods: {
			// 上传房产
			houseUpload() {
				let that = this
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: function(res) {
						that.imgCamera.imgHouse.push(res.tempFilePaths)
						// uni.previewImage({
						//             urls: res.tempFilePaths,
						//             longPressActions: {
						//                 itemList: ['发送给朋友', '保存图片', '收藏'],
						//                 success: function(data) {
						//                     console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						//                 },
						//                 fail: function(err) {
						//                     console.log(err.errMsg);
						//                 }
						//             }
						//         });
					}
				});
			},
			// 改造区域的底部弹框
			checkChange(e) {
				var items = this.modifyArray,
					values = e.detail.value;
				console.log(values);
				this.modifydata = values
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}

			},
			personUpload() {
				let that = this
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: function(res) {
						that.imgCamera.imgHouse.push(res.tempFilePaths);
					}
				});
			},

			/* 改造局域 */
			openModify() {
				let that = this
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				that.$refs.popup.open()
			},
			/* 改造机构 */
			openOrgSelect() {
				let that = this
				that.$refs.popupPlace.open()
			},

			/* 提交 */
			btnSubmit() {
				console.log(this.index.houseTypeIndex);
				if (!this.baseMsg.name || !this.baseMsg.pName || !this.baseMsg.sex || !this.baseMsg.age || !this.array
					.nationArray[this.index.nationIndex] || !this.baseMsg.idCard || !this.baseMsg.address || !
					this.baseMsg.phone || !this.array.abilityArray[this.index.abilityIndex] || !this.array.oldTypeArray[
						this.index.oldTypeIndex] || !this.livMsg.district || !this.livMsg.address ||
					!this.livMsg.owner || !this.livMsg.livCount || !this.livMsg.houseR || !this.livMsg.houseH || !this
					.livMsg.houseT || !this.modifydata.toString() || !this.livMsg
					.area || !this.peoMsg.secondName || !this.peoMsg.secondTelephone) {
					uni.showToast({
						icon: "none",
						duration: 2000,
						title: "请输入完整内容"
					})
					return
				}
				userApply({
					// 基础信息
					name: this.baseMsg.name,
					spouseName: this.baseMsg.pName,
					sex: this.baseMsg.sex,
					age: this.baseMsg.age,
					nation: this.array.nationArray[this.index.nationIndex],
					// TODO
					birthday: formatTime(this.index.date),
					id: this.baseMsg.idCard,
					permanentAddress: this.baseMsg.address,
					telephone: this.baseMsg.phone,
					ability: this.array.abilityArray[this.index.abilityIndex],
					type: this.array.oldTypeArray[this.index.oldTypeIndex],

					// 居住信息
					district: this.livMsg.district,
					detailedAddress: this.livMsg.address,
					owner: this.livMsg.owner,
					peopleCount: this.livMsg.livCount,
					houseR: this.livMsg.houseR,
					houseH: this.livMsg.houseH,
					houseT: this.livMsg.houseT,
					houseType: this.index.houseTypeIndex,
					// TODO
					houseYears: formatTime(this.index.arcIndex),
					reformRegion: this.modifydata.toString(),
					area: this.livMsg.area,

					// 紧急联系人
					secondName: this.peoMsg.secondName,
					secondTelephone: this.peoMsg.secondTelephone,

					// 改造项目
					organizationId: this.projMsg.jigou,
					productIds: getApp().globalData.selectedPro.toString(),

					// 其他信息
					userId: this.$store.state.user.userId,
					status: 1
				}).then(res => {
					uni.showToast({
						icon:'none',
						duration:1000,
						title:"提交成功"
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1000)
				})
			},
			// 获取男女radio
			radioChange(e) {
				this.baseMsg.sex = e.detail.value
			},
			// 获取机构
			jiGouiChange(e) {
				this.projMsg.jigou = e.detail.value
				console.log(this.projMsg.jigou);
			},

			/* 民族picker */
			nationPickerChange(e) {
				this.index.nationIndex = e.target.value
			},
			/* 自理能力picker */
			abilityPickerChange(e) {
				this.index.abilityIndex = e.target.value
			},
			/* 老人类型 */
			oldTypePickerChange(e) {
				this.index.oldTypeIndex = e.target.value
			},
			/* 生日picker */
			birthDateChange(e) {
				this.index.date = e.target.value
			},
			/* 建筑年代 */
			arcDateChange(e) {
				this.index.arcIndex = e.target.value
			},
			/* 房屋类型 */
			houseTypePickerChange(e) {
				this.index.houseTypeIndex = e.target.value
			},

			/* 日期 */
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			// 获取机构名称
			getJiGou() {
				getInstitutionMenu().then(res => {
					for (let i of res) {
						getInstitutionDetail(i.organizationMenuId).then(res2 => {
							for (let j of res2) {
								this.jiGouData.push(j)
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		margin: 0 30rpx;

		/* 弹出框 */
		uni-popup {

			// height: 35%;
			.popup-title {
				text-align: center;
				margin: 20rpx;
			}

			.popup-modify {
				margin: 30rpx;

				.check-item {
					border-bottom: 3rpx #eee solid;
					padding-bottom: 15rpx;
					padding-top: 15rpx;
				}
			}
		}

		// 机构选择的弹框
		.jigou-popup {
			margin-top: 20rpx;
			margin-bottom: 30rpx;
			margin-left: 20rpx;
		}

		/* 每级标题 */
		.lv {
			font-weight: 600;
			font-size: 36rpx;
		}

		/* 基础信息 */
		.baseInfo {
			margin-top: 50rpx;

			.baseInfo-input {
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				padding-right: 20rpx;
				justify-content: space-between;
				border-bottom: 3rpx #eee solid;
				height: 110rpx;

				.uni-input {
					width: 400rpx;
					@include ellipsis
				}

				input {
					text-align: right;
				}
			}

			/* 三个input的特殊处理 */
			.input-three {
				text {
					width: 100rpx;
					display: inline-block;
				}

				input {
					width: 200rpx;
					text-align: center;
				}
			}

			/* 房产信息 */
			.house {
				.house-up {
					width: 200rpx;
					height: 200rpx;
					background-color: $uni-color-homeBg;

					image {
						width: 60%;
						height: 60%;
					}
				}

				.house-img {
					width: 200rpx;
					height: 200rpx;

					image {
						width: 200rpx;
						height: 200rpx;
					}
				}
			}

			/* 个人材料 */
			.person {
				.person-up {
					width: 200rpx;
					height: 200rpx;
					background-color: $uni-color-homeBg;

					image {
						width: 60%;
					}
				}

				.person-img {
					width: 200rpx;
					height: 200rpx;

					image {
						width: 200rpx;
						height: 200rpx;
					}
				}
			}
		}

		.liveInfo {
			@extend .baseInfo
		}


		.phone {
			@extend .baseInfo
		}

		.project {
			@extend .baseInfo
		}

		/* 提交按钮 */
		.btnSubmit {
			width: 90%;
			font-size: 35rpx;
			font-weight: 600;
			color: #fff;
			cursor: pointer;
			margin: 40rpx;
			height: 90rpx;
			text-align: center;
			border: none;
			background-size: 300% 100%;

			border-radius: 50px;
			moz-transition: all .4s ease-in-out;
			-o-transition: all .4s ease-in-out;
			-webkit-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
		}

		.btnSubmit.color-1 {
			background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
			   box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
		}
	}
</style>
